<template>
  <el-date-picker
    v-model="date"
    :type="type"
    :format="type === 'year' ? 'YYYY' : 'YYYY-MM'"
    :placeholder="placeholder"
    :value-format="type === 'year' ? 'YYYY' : 'YYYY-MM'"
    class="custom-date-picker"
    :clearable="false"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue';
import { ElDatePicker } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: [Date, String, Number],
    default: '',
  },
  type: {
    type: String,
    default: 'date',
  },
  placeholder: {
    type: String,
    default: '请选择日期',
  },
});

const emit = defineEmits(['modelValue']);
const date = ref(props.modelValue);

watch(date, (newDate) => {
  emit('modelValue', newDate);
});

// 新增 pickerOptions 定义
const pickerOptions = {
  disabledDate(time) {
    const minDate = new Date('2022-02-01');
    const maxDate = new Date();
    return time < minDate || time > maxDate;
  },
};
</script>

<style scoped>
.custom-date-picker {
  --ep-bg-color: #2e3142; /* 深色背景 */
  --ep-text-color: #ffffff; /* 文本颜色 */
  --ep-border-color: #40435c; /* 边框颜色 */
  --ep-panel-bg-color: #303247; /* 面板背景颜色 */
}

.custom-date-picker .el-input__inner {
  background-color: var(--ep-bg-color);
  color: var(--ep-text-color);
  border-color: var(--ep-border-color);
}

.custom-date-picker .el-date-picker__popper {
  background-color: var(--ep-panel-bg-color);
}

.custom-date-picker .el-picker-panel__body {
  background-color: var(--ep-panel-bg-color);
}
</style>